// 影院首页的所有一级组件和二级组件
<template>
  <div class="indexFilm">
    <!-- 切换子路由，home,center, cinema,group 组件就会进入到这个坑 -->
    <transition
      mode="out-in"
      :duration="200"
      appear
      enter-active-class="animated fadeInUpBig"
      leave-active-class="animated fadeOutDownBig"
    >
      <router-view></router-view>
    </transition>
    <!-- transition的动画可以自己定义，enter-active-class -->
    <NavBar></NavBar>
  </div>
</template>

<script>
import NavBar from "../components/NavBar/NavBar";

export default {
  name: "indexFilms",
  // 局部组件注册就能用在上面的模板了
  components: {
    NavBar
  }
};
</script>

<style lang="scss">
@import "@/style/common/px2rem.scss";
.indexFilm {
  display: flex;
  flex-direction: column;
  flex: 1;
}
</style>
